<template>
  <n-grid x-gap="12" :cols="2">
    <n-gi>
      <n-flex align="center" v-if="type !== 'list'">
        <n-button quaternary circle @click="toBack">
          <template #icon>
            <n-icon><arrow-back-outline /></n-icon>
          </template>
        </n-button>
      </n-flex>
    </n-gi>
    <n-gi>
      <n-flex justify="end" align="center" v-if="type === 'list'">
        <n-button @click="toAdd">添加人物</n-button>
      </n-flex>
    </n-gi>
  </n-grid>
</template>
<script setup lang="ts">
  import { inject } from 'vue'
  import { ArrowBackOutline } from '@vicons/ionicons5'
  import { NFlex, NButton, NGrid, NGi, NIcon } from "naive-ui"

  const type = inject('type')

  const toBack = () => {
    type.value = 'list'
  }

  const toAdd = () => {
    type.value = 'add'
  }
</script>
<style lang="scss" scoped>
  .n-flex {
    height: 100%;
  }
  .n-grid {
    height: 100%;
  }
  .n-button {
    color: #fff;
  }
</style>